<script setup>
import { defineProps, onMounted } from "vue";

defineProps({
  enabled: {
    type: Boolean,
    default: false,
  },
});


onMounted(() => {
  // // 获取所有父元素，如果其没有 position 属性，则设置为 relative
  // let parents = document.getElementsByClassName("read_only_mask");
  // for (let i = 0; i < parents.length; i++) {
  //   let parent = parents[i];
  //   let position = window.getComputedStyle(parent).position;
  //   if (position === "static") {
  //     parent.style.position = "relative";
  //   }
  // }
});
</script>

<template>
  <div :class="['read_only_mask', enabled ? 'read_only_on' : 'read_only_off']">
    <h4>已提交</h4>
  </div>
</template>

<style lang="scss" scoped>
.read_only_on {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff66;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  display: none;

  h4 {
    color: #acacac2c;
    font-size: 10rem;
    font-weight: bold;
    transform: rotate(-35deg);
  }
}

.read_only_off {
  display: none;
}
</style>
